<template>
  <div>
    <g-dynamic-table
      type="languagetexts"
      ref="table"
      :fetch="fetchDataList"
      @action-click="handleActionClick"
      rowkey="key"
    ></g-dynamic-table
  ></div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import {
    LanguageServiceProxy,
    LanguageTextListDto,
    UpdateLanguageTextInput,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import GDynamicTable from '/@/shared/components/g-dynamic-table/index.vue';
  import { EVENT_BTN_ENUM } from '/@/shared/components/g-dynamic-table/enums/event-btn-enum';
  import EditLanguageTexts from './edit-language-texts/edit-language-texts.vue';

  export default defineComponent({
    name: 'language-texts-news',
    mixins: [AppComponentBase],
    components: {
      GDynamicTable,
    },
    data() {
      return {
        languageServiceProxy: new LanguageServiceProxy(this.$apiUrl, this.$api),
      };
    },
    methods: {
      //获取数据
      fetchDataList() {
        return new Promise((resolve, reject) => {
          if (!!this.$refs.table) {
            const {
              maxResultCount,
              skipCount,
              sorting,
              FilterText,
              TargetValue,
              BaseLanguage,
              LanguageSource,
              TargetLanguage,
            } = (this.$refs.table as any).getSearchProps();
            this.languageServiceProxy
              .getLanguageTexts(
                LanguageSource,
                BaseLanguage,
                TargetLanguage,
                TargetValue,
                FilterText,
                sorting,
                maxResultCount,
                skipCount,
              )
              .finally(() => {
                // finishedCallback!();
              })
              .then((res) => {
                resolve(res);
                // this.showPaging(res);
              })
              .catch((error) => {
                reject(error);
              });
          } else {
            reject();
          }
        });
      },
      /**
       * 按钮回调事件
       */
      handleActionClick(event: string, item?: any) {
        console.log(event);
        switch (event) {
          case EVENT_BTN_ENUM.Back:
            this.backLanguageList();
            break;
          case EVENT_BTN_ENUM.EDIT:
            this.edit(item);
            break;
          default:
            break;
        }
      },
      /** 编辑语言 */
      edit(item: LanguageTextListDto): void {
        const ILanguageInfo = abp.localization.languages;
        const obj = ILanguageInfo.find((i) => {
          return i.name === (this.$refs.table as any).getPageFilter('BaseLanguage');
        });
        const obj1 = ILanguageInfo.find(
          (i) => i.name === (this.$refs.table as any).getPageFilter('TargetLanguage'),
        );
        let senItem = Object.assign(item, {
          baseLanguageName: this.$refs.BaseLanguage,
          baseLanguageNameText: obj == null ? null : obj?.displayName,
          targetLanguageNameText: obj1 == null ? null : obj1?.displayName,
          targetLanguageName: this.$refs.TargetLanguage,
          sourceName: this.$refs.languageSource,
          value: item.targetValue,
          key: item.key,
        });
        let updateLanguageinput: UpdateLanguageTextInput = new UpdateLanguageTextInput();
        updateLanguageinput.init(senItem);
        console.log(senItem);

        this.modalHelper
          .create(EditLanguageTexts, {
            pageDataList: senItem,
          })
          .subscribe((res) => {
            if (res) {
              (this.$refs.table as any).reloadGoFirstPage();
            }
          });
      },
      /**
       * 返回语言列表
       */
      backLanguageList(): void {
        this.$router.push({
          path: '/system2/languages-news',
        });
      },
    },
  });
</script>

<style scoped lang="less">
  .subscriptionEndUtc {
    text-align: center;
  }

  // table
  .list-table {
    i {
      margin-right: 10px;
    }
  }

  .table-edit {
    .anticon {
      margin-right: 10px;
    }
  }

  .table-delete,
  .ant-dropdown-link {
    margin-left: 20px;
  }
</style>
